import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,

} from 'react-native';
import FastImage from 'react-native-fast-image'

export default class ImageView extends Component {

    static defaultProps = {
        style: {},
        placeholder: "",
        url: "",
        priority: null
    }

    state = {
        showPlaceHolder: true,
    }

    onLoadStart() {
        this.setState({
            showPlaceHolder: true
        });
    }

    onLoadEnd() {
        this.setState({
            showPlaceHolder: false
        });
    }

    render() {
        let show = this.state.showPlaceHolder
        return (
            <View style={this.props.style}>
                {
                    show ? (
                        <Image style={this.props.style} resizeMode={'cover'} source={this.props.placeholder}/>
                    ) : null
                }
                <FastImage style={[{flex: 1},this.props.style]}
                           source={{uri: this.props.url, priority: this.props.priority || FastImage.priority.normal}}
                           onLoadStart={() => this.onLoadStart()} onLoadEnd={() => this.onLoadEnd()}
                           resizeMode={FastImage.resizeMode.cover}/>
            </View>
        )
    }
}